<template>
	<view style="padding: 10px;">
		<!-- 回退的功能 -->
		<!-- 首先添加点击事件 -->
		<!-- 在点击事件里写页面跳转的方法 -->
		<view class="search-bar">
			<image class="icon" @click="back" src="../../static/yiliaohangyedeICON-.png"></image>
			<input v-model="inputValue" class="search" placeholder="请输入搜索内容" @input="change" />
			<text style="line-height: 2;">搜索</text>
		</view>
		<!-- 搜索提示 -->
		<view style="margin-top: 10px;" v-if="serachList">
			<view style="line-height: 2;">我在长征路上开超市</view>
			<view style="line-height: 2;">我在长征路上开超市</view>
			<view style="line-height: 2;">我在长征路上开超市</view>
			<view style="line-height: 2;">我在长征路上开超市</view>
		</view>
		<!-- 搜索榜单 -->
		<view>
			<!-- 搜索分类 -->
			<view style="display: flex;justify-content: space-between;margin: 15px 0;">
				<text :class="type==index?'active':''" @click="changeClass(index)" v-for="(item,index) in typeList">{{item}}</text>
			</view>
			<!-- 分类对应的列表 -->
			<view v-show="type==index" v-for="(item,index) in searchTypeList">
				<view style="display: flex;justify-content: space-between;padding: 10px 0;" v-for="(it,inx) in item">
					<view>
						<image class="icon-order" :src="it.imgSrc"></image>
						<text>{{it.text}}</text>
					</view>
					<text style="color: #999999;">{{it.count}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				serachList:false,
				inputValue:"",
				typeList:['抖音热榜','柳州榜','直播榜','团购榜','品牌榜'],
				searchTypeList:[[
					{imgSrc:'../../static/one.png',text:'A股',count:'1201.2万'},
					{imgSrc:'../../static/two.png',text:'鸿蒙NEXT公测',count:'1202.2万'},
					{imgSrc:'../../static/three.png',text:'南极正在变绿',count:'1204.2万'}
				],[
					{imgSrc:'../../static/one.png',text:'222',count:'1201.2万'},
					{imgSrc:'../../static/two.png',text:'222',count:'1202.2万'},
					{imgSrc:'../../static/three.png',text:'222',count:'1204.2万'}
				],[
					{imgSrc:'../../static/one.png',text:'333',count:'1201.2万'},
					{imgSrc:'../../static/two.png',text:'333',count:'1202.2万'},
					{imgSrc:'../../static/three.png',text:'333',count:'1204.2万'}
				],[
					{imgSrc:'../../static/one.png',text:'444',count:'1201.2万'},
					{imgSrc:'../../static/two.png',text:'444',count:'1202.2万'},
					{imgSrc:'../../static/three.png',text:'444',count:'1204.2万'}
				],[
					{imgSrc:'../../static/one.png',text:'555',count:'1201.2万'},
					{imgSrc:'../../static/two.png',text:'555',count:'1202.2万'},
					{imgSrc:'../../static/three.png',text:'555',count:'1204.2万'}
				]],
				type:0,
				list:[{text:'111',count:'111.0w'},{text:'222',count:'222.0w'}]
			}
		},
		methods: {
			changeClass(index){
				this.type = index
				console.log(index);
			},
			change(){
				//console.log(event.data);
				console.log(this.inputValue);
				if(this.inputValue.length == 0){
					this.serachList = false;//控制搜索联想列表隐藏
				}else{
					this.serachList = true;//控制搜索联想列表显示
				}
			},
			back(){
				//回到上一级页面
				uni.navigateBack()
			},
			currentChange(e){
				console.log(e)
				//当划到第二张图片的时候提示
				if(e.detail.current == 1){
					//alert("第二张图片")
				}
			}
		}
	}
</script>

<style>
	.active{
		color: #fc5d50;
		font-weight: bold;
	}
	.icon-order{
		width: 20px;
		height: 20px;
		margin-right: 10px;
	}
	.search{
		width: calc(100% - 95px);
		height: 36px;
		background-color: #eee;
		padding-left: 15px;
	}
	.search-bar{
		display: flex;
		justify-content: space-between;
	}
	.icon{
		width: 30px;
		height: 30px;
	}
</style>
